<template>
  <PageWrapper dense
               contentFullHeight
               fixedHeight
               contentClass="flex">
    <BasicTable @register="registerTable">
      <template #toolbar>
        <a-button type="primary"
                  @click="handleCreate">新增账号</a-button>
      </template>
      <template #action="{ record }">
        <TableAction :actions="[
            {
              label: '编辑',
              onClick: handleEdit.bind(null, record),
            },
            {
              label: '删除',
              color: 'error',
              popConfirm: {
                title: '是否确认删除',
                confirm: handleDelete.bind(null, record),
              },
            },
          ]" />
      </template>
    </BasicTable>
    <Modal @register="registerModal"
           @success="handleSuccess" />
    <AddModal @register="addRegisterModal"
              @success="handleSuccess" />
  </PageWrapper>
</template>
<script lang="ts">
import { defineComponent } from 'vue';

import { BasicTable, useTable, TableAction, BasicColumn, FormSchema } from '/@/components/Table';
import { listApi, DeleteApi } from '/@/api/set/account';
import { PageWrapper } from '/@/components/Page';
import { useModal } from '/@/components/Modal';
import Modal from './modal.vue';
import AddModal from './addModal.vue';
const columns: BasicColumn[] = [
  {
    title: '用户姓名',
    dataIndex: 'nickName',
  },
  {
    title: '用户账号',
    dataIndex: 'userName',
  },
  {
    title: '联系方式',
    dataIndex: 'phonenumber',
  },
  {
    title: '状态',
    dataIndex: 'status',
    format(value) {
      return ['启用', '停用'][value];
    },
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
  },
  {
    title: '角色',
    dataIndex: 'roleName',
    format(value) {
      return value[0];
    },
  },
];
const searchFormSchema: FormSchema[] = [
  {
    field: 'nickName',
    label: '用户姓名：',
    component: 'Input',
    colProps: {
      span: 8,
    },
  },
  {
    field: 'userName',
    label: '用户账号：',
    component: 'Input',
    colProps: {
      span: 8,
    },
  },
  {
    field: 'status',
    label: '状态：',
    component: 'Select',
    componentProps: {
      options: [
        { label: '启用', value: '0' },
        { label: '停用', value: '1' },
      ],
    },
    colProps: {
      span: 8,
    },
  },
];

export default defineComponent({
  name: 'AccountManagement',
  components: { BasicTable, PageWrapper, Modal, TableAction, AddModal },
  setup() {
    const [registerModal, { openModal }] = useModal();
    const [addRegisterModal, { openModal: addOpenModal }] = useModal();
    const [registerTable, { reload }] = useTable({
      api: listApi,
      columns,
      formConfig: {
        labelWidth: 120,
        schemas: searchFormSchema,
      },
      useSearchForm: true,
      bordered: true,
      actionColumn: {
        width: 120,
        title: '操作',
        dataIndex: 'action',
        slots: { customRender: 'action' },
      },
    });

    function handleCreate() {
      addOpenModal(true, {
        isUpdate: false,
      });
    }

    function handleEdit(record: Recordable) {
      openModal(true, {
        record,
        isUpdate: true,
      });
    }

    async function handleDelete(record: Recordable) {
      await DeleteApi([record.userId]);
      reload();
    }

    function handleSuccess() {
      reload();
    }

    return {
      registerTable,
      registerModal,
      handleCreate,
      handleEdit,
      handleDelete,
      handleSuccess,
      addRegisterModal,
    };
  },
});
</script>
